<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>多值统计线</title>
    <script include="proj4,mapv" src="./static/libs/include-openlayers-local.js"></script>
    <style>
        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
        var map = new ol.Map({
            //地图容器div的ID
            target: 'map',
            //地图容器中加载的图层
            layers: [],
            //地图视图设置
            view: new ol.View({
                //地图初始中心点
                center: ol.proj.fromLonLat([110, 30]),
                //地图初始显示级别
                zoom: 2,
                //最小级别
                minZoom: 1,
                //最大级别
                maxZoom: 12
            })
        });

        map.addLayer(new ol.layer.Tile({
            source: new ol.source.TileImage({
                url: 'https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
            })
        }))

        var randomCount = 1000;
        var data = [];
        var citys = ["北京", "天津", "上海", "重庆", "石家庄", "太原", "呼和浩特", "哈尔滨", "长春", "沈阳", "济南", "南京", "合肥", "杭州", "南昌", "福州",
            "郑州", "武汉", "长沙", "广州", "南宁", "西安", "银川", "兰州", "西宁", "乌鲁木齐", "成都", "贵阳", "昆明", "拉萨", "海口"
        ];
        // 构造数据
        while (randomCount--) {
            var cityCenter1 = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)]);
            var cityCenter2 = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)]);
            data.push({
                geometry: {
                    type: 'LineString',
                    coordinates: [
                        ol.proj.transform(
                            [cityCenter1.lng - 1 + Math.random() * 1,
                                cityCenter1.lat - 1 + Math.random() * 1
                            ], 'EPSG:4326', 'EPSG:3857'),

                        ol.proj.transform([
                            cityCenter2.lng - 1 + Math.random() * 1,
                            cityCenter2.lat - 1 + Math.random() * 1
                        ], 'EPSG:4326', 'EPSG:3857')
                    ]
                },
                count: 30 * Math.random()
            });
        }
        var dataSet = new mapv.DataSet(data);
        var mapVOptions = {
            gradient: {
                0: 'blue',
                0.5: 'yellow',
                1: 'red'
            },
            lineWidth: 0.5,
            max: 30,
            draw: 'intensity'
        };

        map.addLayer(
            new ol.layer.Image({
                source: new ol.source.Mapv({
                    map: map,
                    dataSet: dataSet,
                    mapVOptions: mapVOptions
                })
            })
        );
    </script>
</body>

</html>